<script setup>
import ButtonLogin from '@/components/ButtonLogin.vue'
import InputLogin from '@/components/InputLogin.vue'
import { userLogin, userRegister } from '@/api/user'
import { useUserStore } from '@/stores'
import router from '@/router'
import { ElMessage } from 'element-plus'

const loginForm = ref(null)
const signupForm = ref(null)

const toSignUp = () => {
  loginForm.value.style.display = 'none'
  signupForm.value.style.display = 'flex'
}

const toLogin = () => {
  signupForm.value.style.display = 'none'
  loginForm.value.style.display = 'flex'
}

// 表单数据
const LoginFormData = ref({
  username: 'rose',
  password: ''
})
const SignupFormData = ref({
  username: '',
  password: '',
  repassword: ''
})

const loginToDashboard = async () => {
  const res = await userLogin(LoginFormData.value)
  const { token, ...userInfo } = res.data

  const userStore = useUserStore()
  userStore.setToken(token)
  userStore.setUserInfo(userInfo)

  ElMessage.success('登录成功')
  router.push('/dashboard/overview')
}

const registerToDashboard = async () => {
  if (SignupFormData.value.password !== SignupFormData.value.repassword) {
    ElMessage.error('两次密码不一致')
    return
  }
  const res = await userRegister(SignupFormData.value)
  const { token, ...userInfo } = res.data

  const userStore = useUserStore()
  userStore.setToken(token)
  userStore.setUserInfo(userInfo)

  ElMessage.success('注册成功')
  router.push('/dashboard/overview')
}
</script>

<template>
  <div class="content">
    <div class="wrapper">
      <div class="form-wrapper">
        <div ref="loginForm" class="login-form">
          <div class="tips">
            <h1 class="u-margin-bottom-md">登录</h1>
            <span>没有账户？</span>
            <a href="#" @click.prevent="toSignUp" class="btn-text">注册</a>
          </div>
          <div class="ib-wrapper">
            <input-login
              type="text"
              extraClass="user"
              width="100%"
              v-model="LoginFormData.username"
            ></input-login>
            <input-login
              type="password"
              extraClass="pwd"
              width="100%"
              v-model="LoginFormData.password"
            ></input-login>
            <button-login
              extraClass="form-btn"
              text="登录"
              @click="loginToDashboard"
            ></button-login>
          </div>
        </div>
        <div ref="signupForm" class="signup-form">
          <div class="tips">
            <h1 class="u-margin-bottom-md">注册账户</h1>
            <span>已有账户？</span>
            <a href="#" @click.prevent="toLogin" class="btn-text">登录</a>
          </div>
          <div class="ib-wrapper">
            <input-login
              type="text"
              extraClass="user"
              width="100%"
              v-model="SignupFormData.username"
            ></input-login>
            <input-login
              type="password"
              extraClass="pwd"
              width="100%"
              v-model="SignupFormData.password"
            ></input-login>
            <input-login
              type="repassword"
              extraClass="repwd"
              width="100%"
              v-model="SignupFormData.repassword"
            ></input-login>
            <button-login
              extraClass="form-btn"
              text="注册"
              @click="registerToDashboard"
            ></button-login>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<style lang="scss" scoped>
@import '@/assets/scss/abstracts/variables';
@import '@/assets/scss/abstracts/mixins';
@import '@/assets/scss/base/animation';

.content {
  width: 100vw;
  height: 100vh;
  background-color: rgba($color-primary-dark, 0.8);
  // Adding a subtle gradient overlay to the background
  background-image: linear-gradient(
    135deg,
    rgba($color-primary-dark, 0.9) 0%,
    rgba($color-primary-dark, 0.7) 100%
  );
}

.wrapper {
  width: 65%;
  height: 75%;
  border-radius: 2rem;
  padding: 8rem;
  @include absCenter;

  // Apply the blur to the pseudo-element that will hold the background image
  position: relative;
  overflow: hidden; // Important to contain the pseudo-element
  z-index: 1;

  // Remove the background image from here
  background-color: rgba($color-grey-dark-1, 0.6);
  box-shadow: 0 2rem 4rem rgba(0, 0, 0, 0.3);

  @include flexColumnCenter;

  // Create a pseudo-element for the blurred background
  &::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-image: url(@/assets/img/R.jpg);
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
    filter: blur(0.5rem); // Use filter instead of backdrop-filter
    z-index: -1;
  }

  // Add a gradient overlay as a separate pseudo-element
  &::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-image: linear-gradient(
      152.5deg,
      rgba($color-grey-dark-1, 0.75) 0%,
      rgba($color-grey-dark-1, 0.6) 50%,
      rgba($color-grey-dark-1, 0.4) 75%,
      rgba($color-grey-dark-1, 0.3) 100%
    );
    z-index: -1;
  }
}

.form-wrapper {
  width: 100%;

  .login-form,
  .signup-form {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 3rem;

    .tips {
      color: $color-white;
      text-shadow: 0 0.2rem 0.4rem rgba(0, 0, 0, 0.3);

      h1 {
        font-weight: 600;
        letter-spacing: 0.1rem;
      }

      span {
        font-size: 1.5rem;
      }
    }

    .ib-wrapper {
      @include flexColumnCenter;
      gap: 1rem;
      width: 50%;

      padding: 2rem;
      border-radius: 1rem;

      .user {
        &::before {
          content: '账号';
        }

        &::after {
          background: url(@/assets/svg/user.svg) no-repeat center / 100%;
        }
      }

      .pwd {
        &::before {
          content: '密码';
        }

        &::after {
          background: url(@/assets/svg/password.svg) no-repeat center / 100%;
        }
      }

      .repwd {
        &::before {
          content: '确认密码';
        }

        &::after {
          background: url(@/assets/svg/re-password.svg) no-repeat center / 100%;
        }
      }

      .form-btn {
        width: 40%;
        height: 6rem;
        color: $color-white;
        font-size: 2rem;
        font-weight: 600;
        // Adding subtle transition for better interaction
        transition:
          transform 0.2s,
          box-shadow 0.2s;

        &:hover {
          transform: translateY(-0.3rem);
          box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.2);
        }

        &:active {
          transform: translateY(-0.1rem);
          box-shadow: 0 0.25rem 0.5rem rgba(0, 0, 0, 0.2);
        }
      }
    }
  }

  .signup-form {
    opacity: 0;
    display: none;
    animation: loginAnimation 1s ease forwards;
  }

  .login-form {
    animation: loginAnimation 1s ease forwards;
  }
}
</style>
